<template>
  <div class="gs-date--box">
    <input  autocomplete="off"  class="input gs-date--date" ref="date" :value="value" :disabled="disabled" 
    @focus="focusSelect" @change="inputChange" @click="dialog = true"> 

      <div ref="dialog" class="gs-date--dialog" v-if="dialog" style="z-index:10000;padding:8px;box-sizing: inherit;" :class="[dialog ? 'gs-show--'+trends:'gs-hidden--'+trends]">
        <div class="gs-date-month-title" :class="[gsStyle ? 'gs-date-month-title--'+gsStyle:'']">
          <div class="gs-date-month--box">
            <!-- <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />1</label>
            <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />2</label>
            <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />3</label>
            <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />4</label>
            <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />5</label>
            <label class="gs-date-month--radio" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"><input name="month" type="radio" value="" />6</label> -->
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            ref="one" :redio="monthStr==1 || monthStr=='01' ? 'true':'false'" @click="monthClick($event,'01')">1月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            ref="two" :redio="monthStr==2 || monthStr=='02' ? 'true':'false'" @click="monthClick($event,'02')">2月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            :redio="monthStr==3 || monthStr=='03' ? 'true':'false'" ref="three" @click="monthClick($event,'03')">3月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            :redio="monthStr==4 || monthStr=='04' ? 'true':'false'" ref="four"  @click="monthClick($event,'04')">4月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            :redio="monthStr==5 || monthStr=='05' ? 'true':'false'" ref="five"  @click="monthClick($event,'05')">5月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            :redio="monthStr==6 || monthStr=='06' ? 'true':'false'" ref="six"  @click="monthClick($event,'06')">6月</div>
          </div>
          <div class="gs-date-month--box">
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']" 
            :redio="monthStr==7 || monthStr=='07' ? 'true':'false'" ref="seven" @click="monthClick($event,'07')">7月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            :redio="monthStr==8 || monthStr=='08' ? 'true':'false'" ref="eight" @click="monthClick($event,'08')">8月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            :redio="monthStr==9 || monthStr=='09' ? 'true':'false'" ref="nine" @click="monthClick($event,'09')">9月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            :redio="monthStr==10 || monthStr=='10' ? 'true':'false'" ref="ten" @click="monthClick($event,'10')">10月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            :redio="monthStr==11 || monthStr=='11' ? 'true':'false'" ref="eleven" @click="monthClick($event,'11')">11月</div>
            <div class="gs-date-month--div" :class="[gsStyle ? 'gs-date-month--'+gsStyle:'']"
            :redio="monthStr==12 || monthStr=='12' ? 'true':'false'" ref="twenty" @click="monthClick($event,'12')">12月</div>
          </div>
        </div>

        <div class="gs-date-year--box">
          <gs-day ref="gsday" :gsStyle="gsStyle" @dayClick="dayClick" class="gs-date-year--left" :date="dateValue"></gs-day>
          <div class="gs-date-year--right">
            <gs-button size="small" :type="gsStyle" @click="btnClick">今天</gs-button>
            <select v-if="dialog" size="5" :class="[gsStyle ? 'gs-date-select--'+gsStyle:'']" @change="yearClick($event)" ref="select">
              <option :selected="yearStr == a" :value="a" v-for="(a,index) in year" :key="index" :class="[gsStyle ? 'gs-date-option--'+gsStyle:'']">{{a}}</option>
            </select>
          </div>
        </div>
        
      </div>
    </input>
  </div>
  
  
</template>
<script>
import gsDay from "./day";
import gsButton from '../button/button'
export default {
  /**
   * @params format: yyyy-mm-dd
   * @params disabled: 禁用
   * @params select: 是否选中 默认选中
   * @params gsStyle: 风格
   * @params trends : 动画
   */
  name: "gsDate",
  components: {
    gsDay,
    gsButton
  },
  props: {
    disabled: Boolean,
    gsStyle: String,
    trends:String,
    value: null,
    date: String,
    format:String
  },
  model: {
    prop: "value",
    event: "gsdate",
  },
  data() {
    return {
      dialog: false,
      dateValue:"",
      monthStr:"",
      yearStr:"",
      dayStr:"",
      select:Boolean,
      year: [],
    };
  },
  created() {
    //initmonth
    if(!this.value){
      this.yearStr = new Date().getFullYear();
      this.monthStr = new Date().getMonth() + 1;
      this.dayStr = new Date().getDate();
      this.dateValue = this.dateFormat("yyyy-mm-dd",this.yearStr+'-'+this.monthStr+'-'+this.dayStr);
      
    }else{
      this.dateValue = this.value;
      this.yearStr = new Date(this.value).getFullYear();
      this.monthStr = new Date(this.value).getMonth()+1;
      this.dayStr = new Date(this.value).getDate();
    }
    //inityear
    for (let index = 10; index >= 0; index -- ) {
      this.year.push(Number(this.yearStr) - index)
    }
    for (let i = 1; i < 10; i++) {
      this.year.push(Number(this.yearStr) + i)
    }
  },
  mounted() {
    this.addClick();
  },
  methods: {
    dateFormat(fmt, date) {
      date = new Date(date)
      let ret;
      const opt = {
        "y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    //重新生成天数
    changeDay(){
      this.dateValue = this.yearStr +'-'+this.monthStr+ '-'+this.dayStr;
      this.$refs.gsday.createGetDays(this.dateValue);
    },
    //绑定点击空白地方关闭
    addClick() {
      document.addEventListener('click',this.webClick,false);
    },
    //监听方法
    webClick(e){
      const that = this
      e = e || window.event;
      var dom = e.srcElement || e.target;
      if (dom.className.search("gs-date--date") != -1 ) {
        // 
      } else if(that.$refs.dialog && !that.$refs.dialog.contains(dom)){
        that.dialog = false;
      }
      that.$nextTick(()=>{
        ///
        if(that.$refs.select){
          const select = that.$refs.select.childNodes
          for (let index = 0; index < select.length; index++) {
            if(select[index].selected){
              that.$refs.select.scrollTop = select[index].offsetTop - 70
            }
          }
        }
        
      })
    },
    yearClick(event){
      this.yearStr = event.target.value
      this.changeDay();
    },
    monthClick(e,month) {
      this.btnClear();
      e.target.attributes[0].value = e.target.attributes[0].nodeValue = "true";
      this.monthStr = month
      this.changeDay();
    },
    btnClear() {
      this.$refs.one.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.two.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.three.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.four.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.five.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.six.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.seven.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.eight.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.nine.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.ten.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.eleven.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
      this.$refs.twenty.attributes[0].value = this.$refs.one.attributes[0].nodeValue =
        "false";
    },
    dayClick(val) {
      const retStr = this.dateFormat(this.format ? this.format :"yyyy-mm-dd",this.yearStr+'-'+this.monthStr+'-'+val);
      this.$emit("gsdate",retStr);
      this.dialog = false;
    },
    btnClick(){
      const retStr = this.dateFormat(this.format ? this.format :"yyyy-mm-dd",new Date());
      this.$emit("gsdate",retStr);
      this.dialog = false;
    },
    focusSelect(event){
      if (this.select) event.currentTarget.select();
    },
    inputChange(e){
      var r=String(e.target.value).replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")
      const retStr = this.dateFormat(this.format ? this.format :"yyyy-mm-dd",new Date(r));
      this.$emit("gsdate",retStr);
      this.dialog = false;
    },
    
  },
};
</script>



